<template>
  <div class="right_bottom" v-if="pageflag">
    <div class="shouru">
      <!-- :style="{ margin: list.length > 2 ? '0px 20px 0' : '40px 20px 0' }" -->
      <div class="item" v-for="(item, index) in list" :key="index"
        style="margin:0px 20px;">
        <div class="label">{{ item.name }}</div>
        <div class="value-box">
          <div class="value-item" style="margin-bottom: 10px;">
            <div class="value">
              <div class="bg-common" :class="['bg' + index]"
                :style="{ width: (item.money / maxElement.money * 100) + '%' }"></div>
            </div>
            <div class="money">
              订单总额：<AnimatedNumber :value="item.money" :round="2" :format="formatToPrice" />元
            </div>
          </div>
          <div class="value-item">
            <div class="value">
              <div class="bg-common" :class="['rbg' + index]"
                :style="{ width: item.use_rate + '%' }"></div>
            </div>
            <div class="money">
              电池使用率：<AnimatedNumber :value="item.use_rate" :round="2" :format="formatToPrice" />%
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <Reacquire v-else @onclick="getData" style="line-height: 200px">
    重新获取
  </Reacquire>
</template>

<script>
import * as API from '@/api'
import AnimatedNumber from "animated-number-vue";
export default {
  components: {
    AnimatedNumber
  },
  data() {
    return {
      list: [
        {
          name: '',
          money: 0
        }
      ],
      maxElement: {},
      pageflag: false,
      timer: null,
      autoTime: 10 * 60 * 1000
    };
  },
  created() {
    this.getData()
  },
  mounted() {
    this.switper()
  },
  beforeDestroy() {
    this.clearData()

  },
  methods: {
    clearData() {
      if (this.timer) {
        clearInterval(this.timer)
        this.timer = null
      }
    },
    //轮询
    switper() {
      if (this.timer) {
        return
      }
      let looper = (a) => {
        this.getData()
      };
      this.timer = setInterval(looper, this.autoTime);
    },
    formatToPrice(value) {
      return `${value.toFixed(2)}`;
    },
    getData() {
      API.GET('/super/screen/brand_stat').then(res => {
        if (res.code === 1) {
          this.list = [...res.data];
          console.log('this.list', this.list)
          this.getMax()
          this.pageflag = true;
        } else {
          this.pageflag = false
        }
      })
    },
    getMax() {
      const maxA = Math.max(...this.list.map(obj => obj.money));
      console.log('maxA', maxA)
      this.maxElement = this.list.find(obj => obj.money == maxA);
      console.log('maxElement', this.maxElement)
    }
  }
};
</script>
<style lang='scss' scoped>
.right_bottom {
  box-sizing: border-box;
  padding: 0 16px;
  position: absolute;
  width: 100%;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);

  .noData {
    width: 100%;
    line-height: 100px;
    text-align: center;
    color: rgb(129, 128, 128);

  }

  .shouru {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    margin-top: 22px;
    .item {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;

      .label {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        box-sizing: border-box;
        padding-right: 10px;
        text-align: right;
        min-width: 90px;
        font-size: 16px;
        flex-shrink: 0;
      }

      .value-box {
        width: 100%;
        padding: 8px 0;
        box-sizing: border-box;
        .value-item {
          display: flex;
          align-items: center;
          justify-content: center;
          position: relative;
        }
      }

      .value {
        width: 90%;
        position: relative;
        height: 30px;
        margin-top: 1px;
        border-radius: 5px;
        display: flex;
        justify-content: flex-end;
        position: relative;
        align-items: center;
        box-shadow: 0 0 3px #999;

        .bg-common {
          width: 0px;
          height: 100%;
          position: absolute;
          left: 0;
          top: 0;
          transition: all 2s ease-in-out;
          border-radius: 5px;
        }
      }

      .money {
        flex-shrink: 0;
        margin-left: 10px;
        min-width: 180px;
        position: absolute;
        left: 60px;
      }
    }
  }
}

.bg0 {
  background-color: rgb(55, 162, 218);
}

.bg1 {
  // background-color: rgb(251, 144, 147);
  background-color: rgb(55, 162, 218);
}

.bg2 {
  background-color: rgb(55, 162, 218);
}

.bg3 {
  background-color: rgb(61, 86, 38);
}

.bg4 {
  background-color: rgb(118, 225, 24);
}

.bg5 {
  background-color: rgb(118, 225, 24);
}

.rbg0 {
  background-color: #57b157;
}

.rbg1 {
  background-color: #57b157;
}

.rbg2 {
  background-color: #57b157;
}
</style>